// 引入富文本编辑器所需要的样式文件
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
// 在富文本编辑器中解构出一个对象quillEditor
import { quillEditor } from "vue-quill-editor";

export default {
  components: {
    // 将富文本编辑器解构出来的对象注册为私有组件
    quillEditor,
  },
  created() {
    // 获取组件初始化需要的数据 其中级联数据
    this.getData();
  },
  data() {
    // 自定义级联的校验规则
    const checkCat = (rule, value, callback) => {
      if (this.cascaderValues.length !== 3) {
        return callback(new Error("商品分类必须选三级分类"));
      }
      callback();
    };
    return {
      // 当前激活的步骤
      stepActive: 0,
      // 表单数据(根据后台接口确认字段名称)
      form: {
        goods_name: "",
        // 三级分类以逗号分隔 例：1，10，20
        goods_cat: "",
        goods_number: "",
        goods_price: "",
        goods_weight: "",
        // 上传的图片内容
        pics: [],
        // 富文本编辑器内容
        goods_introduce: "",
        attrs: "",
      },
      // 级联控件数据
      cascaderValues: [],
      cascaderOptions: [],
      // 定义表单校验规则
      rules: {
        goods_name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          { min: 2, max: 11, message: "长度为2到11个字符", trigger: "blur" },
        ],
        goods_cat: [
          {
            validator: checkCat,
            trigger: "change",
          },
        ],
        goods_number: [
          { required: true, message: "商品数量必填", trigger: "blur" },
        ],
        goods_weight: [
          { required: true, message: "商品重量必填", trigger: "blur" },
        ],
        goods_price: [
          { required: true, message: "商品价格必须填写", trigget: "blur" },
        ],
      },
      // 定义 商品参数 和 商品属性的数据
      manyAttrs: [],
      onlyAttrs: [],
      // 上传图片相关数据
      uploadUrl: this.$http.defaults.baseURL + "upload",
      uploadHeaders: { Authorization: window.sessionStorage.getItem("token") },
      dialogVisible: false,
      dialogImageUrl: "",
      //富文本编辑器相关数据
      editorOption: {},
    };
  },
  methods: {
    // 富文本编辑器-保存商品将数据提交到服务器
    async saveGoods() {
      // 合并参数
      this.attrs = [...this.manyAttrs, ...this.onlyAttrs];
      const {
        data: { meta },
      } = await this.$http.post(`goods`, this.form);
      if (meta.status !== 201) return this.$message.error(meta.msg);
      // 成功 去列表查看
      // 商品列表是一个组件 /goods 关联（使用编程式导航）
      this.$router.push("/goods");
    },

    // 监听图片上传成功
    successImage(response) {
      // console.log(response);
      // 把上传成功的图片地址追加到data中的form.pics数组中
      this.form.pics.push({ pic: response.data.tmp_path });
    },
    // 预览图片
    previewImage(file) {
      // console.log(file);
      this.dialogImageUrl = file.response.data.url;
      this.dialogVisible = true;
    },
    // 删除图片
    removeImage(file) {
      // console.log(file);
      // 当你删除图片的时候触发这个钩子函数
      // 去删除pics的数组中的一项 根据索引去删除
      // 如果你能知道你删除的是哪张图片 就能知道索引
      // 知道图片的地址 根据地址去pics查找 获取当前查到的数据的索引
      const url = file.response.data.tmp_path;
      const index = this.form.pics.findIndex((item) => item.pic === url);
      this.form.pics.splice(index, 1);
    },
    // 获取商品参数和属性
    // type = many或only
    async getParamsData(type) {
      // 根据类型获取动态参数和静态参数
      // 调用函数的时候 传入指定的类型
      // 三级分类ID 此时已经选中了三级分类
      const id = this.cascaderValues[2];
      const {
        data: { data, meta },
      } = await this.$http.get(`categories/${id}/attributes`, {
        params: { sel: type },
      });
      if (meta.status !== 200) return this.$message.error(meta.msg);
      // 保存数据
      this[type + "Attrs"] = data;
      // console.log(data);
    },
    // 离开任何一个tab选项的钩子函数
    // Function(activeName,oldActiveName) 告诉我们：函数有参数 表示当前选中tab的索引
    beforeLeave(now, old) {
      // 监听当前的old的值是0那么证明在离开第一个tab old是string
      if (+old === 0) {
        // 表格校验中的 return 也是 beforeLeave 的返回值
        // 在这个位置去返回一个 promise
        return new Promise((resolve, reject) => {
          // 在离开第一个tab 整体进行校验
          this.$refs.form.validate((valid) => {
            if (valid) {
              // 成功 切换步骤条
              this.stepActive = +now;
              // 检验成功后 获取商品参数和商品属性的数据
              this.getParamsData("many");
              this.getParamsData("only");
              resolve();
            } else {
              // 失败 阻止tab的切换
              // 注意：只有钩子函数的return false才好使
              // return false;
              reject();
            }
          });
        });
      } else {
        // 离开其他的tab
        this.stepActive = +now;
      }
    },
    // 获取级联数据
    async getData() {
      const {
        data: { data, meta },
      } = await this.$http.get(`categories`);
      console.log(data, meta);
      if (meta.status !== 200) return this.$message.error("获取级联信息失败");
      this.cascaderOptions = data;
    },
    // 级联选择事件
    handleChange() {
      // 是第三级分类的时候才给 goods_cat 赋值
      if (this.cascaderValues.length === 3) {
        this.form.goods_cat = this.cascaderValues.join(",");
      } else {
        this.form.goods_cat = "";
      }
    },
    // tab切换事件 点击tab的事件
    // changeTable(tab) {
    //   // tab 是当前选中的tab的实例对象 包含信息
    //   // tab.index 当前tab的标识 索引的类型是字符串
    //   // "0" "1" "2" "3" "4" 对应五个tab
    //   // + 加号 表示隐式转换（例：+"100" -- 100变为数字类型）
    //   console.log(tab);
    //   this.stepActive = +tab.index;
    // },
  },
};
